<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="assets/fontAwesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/login.css">
      <script src="assets/zepto/zepto.min.js"></script>
    <script src="assets/mui/js/mui.js"></script>
    <script src="./js/common.js"></script>
    <!-- <script src='js/search-result.js'></script> -->
    <style>
    .mui-ellipsis{
        display: inline-block;
        color:#000;
        margin-left:5px;
    }
    .logout{
        text-align: center;
    }
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav header">
        <h1 class="mui-title">登录</h1>
    </header>
    <nav class="mui-bar mui-bar-tab footer">
        <a class="mui-tab-item mui-active" href="index.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="category.html">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item" href="cart.html">
            <span class="mui-icon fa fa-shopping-cart"></span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item" href="user.html">
            <span class="mui-icon mui-icon-person"></span>
            <span class="mui-tab-label">会员中心</span>
        </a>
    </nav>
    <div class="mui-content">
            <ul class="mui-table-view">
                    <li class="mui-table-view-cell mui-media userMsg">
                        
                    </li>
                    <li class="mui-table-view-cell">
                            <a href='change.html' class="mui-navigate-right">修改密码</a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">我的购物车</a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a href='adress.html' class="mui-navigate-right">收获地址</a>
                        </li>
                        <li class="mui-table-view-cell">
                                <a href='javascript:;' class="mui-navigate-right logout">退出登陆</a>
                            </li>
                </ul> 
        </div>
</body>
    <script src='assets/artTemplate/template-web.js'></script>
    <script type='text/template' id='user'>
            <a href="javascript:;" >
                <div class="mui-media-body">
                    <img src="images/user.jpg" alt="" style='width:50px'>
                    <p class='mui-ellipsis'>{{mobile}}<br>
                        账户：{{username}}
                    </p>
                </div>
            </a>
                  
    </script>
    <script>

        $.ajax({
                url:'/user/queryUserMessage',
                type:'get',
                async:false,//是将异步请求修改为同步请求
                success:(res) => {
                    console.log(res);
                     if(res.error == 400){
                        mui.toast(res.message)
                        console.log(111);

                         localStorage.setItem('returnUrl', location.href);

                         location.href = "login.html";

                        // location.href='login.html'
                    }else {
                        //未返回res.success函数
                        var html = template('user',res);
                        $('.userMsg').html(html);
                        
                    }
                }
            })

        $(function(){
            $('.logout').on('tap',()=>{
                $.ajax({
                    url:'/user/logout',
                    type:'get',
                    success:(res) => {
                        console.log(res);
                        if (res.success) {
                            mui.toast('退出成功');
                            setTimeout(()=>{
                                location.href='login.html';
                            },1000)
                        }else if(res.error){
                            mui.toast(res.message)
                        }
                    }
                })
        })
        })


    </script>
</html>